<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todoList练习</title>

	<style>
        body {
            background-color: #CDCDCD;
        }
	</style>
	<link rel="stylesheet" href="css/todolist.css">
	<script src="js/jquery-3.4.1.js"></script>
</head>
<body
		style="margin: 0 0;">
<!--设置高度-->
<header style="height: 50px; background-color: #333333; font-size: 16px; padding: 0">
	<section
			style="margin: 0 auto;">
		<form>
			<label style="float: left;
			width: 100px;
			line-height: 50px;
			color: #DDDDDD;
			font-size: 24px;
			cursor: pointer;">
				ToDoList
			</label>
			<input style="float: right; width:60%; height: 24px; margin-top: 12px; text-indent: 10px; border-radius: 5px;
border-radius: 5px;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset; border: none;"
				   id="title" type="text" name="title" placeholder="添加待办事项">


		</form>
	</section>
</header>
<section style="margin: 0 auto;">
	<h2 style="position: relative;"> 正在进行
		<!--		正在进行的总数-->
		<span id="todocount" style="font-size: 14px;position: absolute;top: 2px;right: 5px;display: inline-block;
padding: 0 5px; border-radius: 20px;background-color: #E6E6FA;line-height: 22px;text-align: center;color: #666666">0</span>
	</h2>
	<ol id="todolist" class="demo-box" style=" padding: 0;
    list-style: none;"></ol>
	<h2 style="position: relative;"> 已经完成
		<span id="donecount" style="font-size: 14px;position: absolute;top: 2px;right: 5px;display: inline-block;
padding: 0 5px; border-radius: 20px;background-color: #E6E6FA;line-height: 22px;text-align: center;color: #666666">0</span>
	</h2>
	<ul id="donelist" style=" padding: 0;
    list-style: none;"></ul>
</section>
<script>
    <!--	保存数据-->
    function saveData(data) {
        localStorage.setItem('todo', JSON.stringify(data))
    }

    //加载数据
    function loadData() {
        var collection = localStorage.getItem('todo');
        if (collection) {
            //拿到json返回列表
            return JSON.parse(collection)
        } else {
            return []
        }
    }

    load();
    $('#title').keydown(function (event) {
        if (event.keyCode === 13) {
            var val = $(this).val();
            console.log(val)
            if (!val) {
                alert('不能为空，请重新输入')
            } else {
                var data = loadData();
                console.log(data.length)
                data.unshift({title: val, done: false});
                $(this).val('');
                console.log(data.length)
                saveData(data)
                load()
            }
        }
    })

    //显示数据
    function load() {
        var todoCount = 0;
        var doneCount = 0;
        var todoStr = '';
        var doneStr = '';
        var todoList = loadData();
        if (todoList.length > 0) {
            todoList.forEach(function (data, i) {
                if (data.done) {//已完成
                    doneStr += `
                        <li>
                            <input type="checkbox" index=${i} checked='checked'>
                            <p id='p-${i}' index=${i}>${data.title}</p>
                            <a href="javascript:;">-</a>
                         </li>
                    `;
                    doneCount++;
                } else {//未完成

                    // 正在进行
                    todoStr += `
                        <li>
                            <input type="checkbox" index=${i}>
                            <p id='p-${i}' index=${i}>${data.title}</p>
                            <a href="javascript:;">-</a>
                         </li>
                    `;
                    todoCount++;
                }
            })
        }

        //添加到为id对应的 list里面
        $('#todolist').html(todoStr);
        $('#donelist').html(doneStr);
        //赋值 数量到对应 id
        $('#todocount').html(todoCount);
        $('#donecount').html(doneCount);
    }

    //删除数据
    $('#todolist').on('click', 'a', function () {
        //加载数据
        var todoList = loadData();

        //拿到下标
        var i = $(this).parent().index();
        console.log('点击了吗' + i)
        todoList.splice(i, 1);
        saveData(todoList);
        load();
    })

    function update(i, key, value) {
        var data = loadData();
        //数据列表 删除相对下标数据 返回 包含被删除项目的新数组，如果有的话。
        var todo = data.splice(i, 1)[0];
        console.log(todo)
        todo[key] = value;
        //删除位置，删除的项目数， 添加新项目
        data.splice(i, 0, todo);
        saveData(data);
        load();
    }

    $('#todolist').on('change', 'input[type=checkbox]', function () {
        var i = parseInt($(this).attr('index'));
        update(i, 'done', true)
    })
    $('#donelist').on('change', 'input[type=checkbox]', function () {
        var i = parseInt($(this).attr('index'));
        update(i, 'done', false)
    })
    //	编辑信息
    $('#todolist').on('click', 'p', function () {
        var i = parseInt($(this).attr('index'));
        var title = $(this).html();
        var $p = $(this);
        	$p.html(`<input type="text" id='input-${i}' value=${title}>`)

        $(`#input-${i}`)[0].setSelectionRange(0, $(`#input-${i}`).val().length);
        $(`#input-${i}`).focus();
        $(`#input-${i}`).blur(function () {
            if ($(this).val().lenght === 0) {
                $p.html(title);
                alert('内容不能为空')
            } else {
                update(i, 'title', $(this).val())
            }
        })

    })

</script>
</body>
</html>